<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

    <h1>
        eventhandling/index.html
    </h1>
    This is an example of event handling.  Cornerstone fires the event 'CornerstoneImageRendered'
    everytime the image is updated.  The event includes the canvas context set to the image coordinate system
    so you can draw overlays.  Cornerstone also fires the event 'cornerstoneImageLoaded' on the cornerstone
    object every time an image is loaded.
    <br>
    <br>
    This example illustrates this by updating the bottom left overlay with the updated WW/WC values.  It also
    illustrates overlays on the image itself by drawing a rectangle around a tumor and labeling it with the text
    "Tumor Here".  It also changes the text "Last ImageId Loaded:" to show the image id loaded
    <br>
    <br>


    <br>
    <br>
    <div id="imageLoaded">Last ImageId Loaded:</div>
    <div style="width:512px;height:512px;position:relative;color: white;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
        <div id="dicomImage" oncontextmenu="return false"
             style="width:512px;height:512px;top:0px;left:0px; position:absolute">
        </div>
        <div id="topleft" style="position: absolute;top:0px; left:0px">
            Patient Name
        </div>
        <div id="topright" style="position: absolute;top:0px; right:0px">
            Render Time:
        </div>
        <div id="bottomright" style="position: absolute;bottom:0px; right:0px">
            Zoom:
        </div>
        <div id="bottomleft" style="position: absolute;bottom:0px; left:0px">
            WW/WC:
        </div>

    </div>

</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>

    $(document).ready(function() {
        // image enable the element
        var element = document.getElementById('dicomImage');
        cornerstone.enable(element);

        // setup handlers before we display the image
        function onImageRendered(e, eventData) {
            // set the canvas context to the image coordinate system
            cornerstone.setToPixelCoordinateSystem(eventData.enabledElement, eventData.canvasContext);

            // NOTE: The coordinate system of the canvas is in image pixel space.  Drawing
            // to location 0,0 will be the top left of the image and rows,columns is the bottom
            // right.
            var context = eventData.canvasContext;
            context.beginPath();
            context.strokeStyle = 'white';
            context.lineWidth = .5;
            context.rect(128, 90, 50, 60);
            context.stroke();
            context.fillStyle = "white";
            context.font = "6px Arial";
            context.fillText("Tumor Here", 128, 85);

            context.beginPath();
            context.arc(128, 128, 20, 0, 2 * Math.PI, false);
            context.fillStyle = 'green';
            context.lineWidth = -1;
            context.strokeStyle = 'white';
            context.stroke();

            $('#topright').text("Render Time:" + cornerstone.lastRenderTimeInMs + " ms");
            $('#bottomleft').text("WW/WL:" + Math.round(eventData.viewport.voi.windowWidth) + "/" + Math.round(eventData.viewport.voi.windowCenter));
            $('#bottomright').text("Zoom:" + eventData.viewport.scale.toFixed(2));

        }
        $(element).on("CornerstoneImageRendered", onImageRendered);

        $(cornerstone).bind('CornerstoneImageLoaded', function(event, eventData)
        {
            // Note - we would
            $('#imageLoaded').text('Last ImageId Loaded:' + eventData.image.imageId);
        });

        // load the image and display it
        var imageId = 'example://1';
        cornerstone.loadImage(imageId).done(function (image) {

            // Now set the image which will fire the events we are interested in
            cornerstone.displayImage(element, image);

            // add event handlers to pan image on mouse move
            $('#dicomImage').mousedown(function (e) {
                var lastX = e.pageX;
                var lastY = e.pageY;

                var mouseButton = e.which;

                $(document).mousemove(function (e) {
                    var deltaX = e.pageX - lastX,
                            deltaY = e.pageY - lastY;
                    lastX = e.pageX;
                    lastY = e.pageY;

                    if (mouseButton == 1) {
                        var viewport = cornerstone.getViewport(element);
                        viewport.voi.windowWidth += (deltaX / viewport.scale);
                        viewport.voi.windowCenter += (deltaY / viewport.scale);
                        cornerstone.setViewport(element, viewport);
                        $('#bottomleft').text("WW/WL:" + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter));
                    }
                    else if (mouseButton == 2) {
                        var viewport = cornerstone.getViewport(element);
                        viewport.translation.x += (deltaX / viewport.scale);
                        viewport.translation.y += (deltaY / viewport.scale);
                        cornerstone.setViewport(element, viewport);
                    }
                    else if (mouseButton == 3) {
                        var viewport = cornerstone.getViewport(element);
                        viewport.scale += (deltaY / 100);
                        cornerstone.setViewport(element, viewport);
                        $('#bottomright').text("Zoom: " + viewport.scale.toFixed(2) + "x");
                    }
                });

                $(document).mouseup(function (e) {
                    $(document).unbind('mousemove');
                    $(document).unbind('mouseup');
                });
            });



        });
    });


</script>
</html>
